.boardcontainer 
{
		position: inherit;
    width: 100%;
    height: 100%;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;

    overflow: hidden;
    background-image: -webkit-gradient(
    									linear,
    									75% 85%,
    									10% 5%,
    									from(rgb(3, 125, 202)),
    									to(rgb(255, 142, 0)));
}

.boardcontainer .hierarkiaboard-waiting
{
		position: fixed;
		text-shadow: #999 40px 40px 3px;
		font-size: 16px;
		cursor: default;
		margin: 28% 25%;
		opacity: 1;
}

.hierarkia-board 
{
    width: 100%;
    height: 100%;
    opacity: 1;
}

.hierarkia-board .board-row
{
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

.hierarkia-board .board-cell
{
    margin: 0;
    padding: 0;
    height: 100%;
    border: none;
    display: inline-block;
}

.hierarkia-board .board-cell span
{
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
}

.hierarkia-board .homezone-neutral
{
    background-color: transparent;
}

.hierarkia-board .homezone-red
{
    background-color: purple;
}

.hierarkia-board .homezone-blue
{
    background-color: green;
}

.hierarkia-board .piece-empty
{
    background-color: transparent;
}

.hierarkia-board .piece-red
{
    background-color: red; color: white;
}

.hierarkia-board .piece-blue
{
    background-color: blue; color: white;
}


.hierarkia-board .state-initial
{
}

.hierarkia-board .state-canmove
{
    background-color: gray; opacity: 0.5;
}

.hierarkia-board .state-canmoveto
{
    background-color: gray; opacity: 0.5;
}

.hierarkia-board .board-cell .cell { width: 100%; height: 100%; position: relative; display: inline-block; }
    .hierarkia-board .board-cell .cell[homezone="red"] { background-color: #A25B00;}

    .hierarkia-board .board-cell .cell[homezone="blue"] { background-color: #014E81; }


.hierarkia-board .board-cell .cell .piece {position: absolute; width: 80%; height: 80%; margin: 10%; display: block; border-radius: 10px; cursor: default;}
    .hierarkia-board .board-cell .cell .piece .value { text-shadow: #000 -1px -1px 3px; }
    .hierarkia-board .board-cell .cell .piece[color="red"] .piece-decoration {border-radius: 2px; position: absolute; display: block; height: 55%; margin: 25% 0%; background-color: #BD7F31; -webkit-box-shadow: 0px 0px 5px #000000;}
		.hierarkia-board .board-cell .cell .piece[color="red"]  {
    									text-align: center;
    									border: thin solid black;
    									background-image: -webkit-gradient(
    									linear,
    									0% 100%,
    									0% 0%,
    									color-stop(0.4, rgb(114, 92, 63)),
    									color-stop(0.6, rgb(84, 19, 4)));
    									}
    .hierarkia-board .board-cell .cell .piece[color="blue"] .piece-decoration {border-radius: 2px; position:absolute; display: block; height: 55%; margin: 25% 0%; background-color: #286B96; -webkit-box-shadow: 0px 0px 5px #000000;}
    .hierarkia-board .board-cell .cell .piece[color="blue"] {
    									text-align: center;
    									border: thin solid black;
    									background-image: -webkit-gradient(
    									linear,
    									0% 0%,
    									0% 100%,
    									color-stop(0.4, rgb(51, 88, 113)),
    									color-stop(0.6, rgb(13, 64, 98)));
    									}    	
   	
		.hierarkia-board .board-cell .cell[canmove=true] .piece { border: white thin dashed; cursor: pointer; }
		.hierarkia-board .board-cell .cell[canmoveto=true] .piece { border: white thin dashed; cursor: pointer;}

		.hierarkia-board .board-cell .cell[canattackto=true] .piece { border: red thin dashed; cursor: pointer; }

		.hierarkia-board .board-cell .cell[attackingfrom=true] .piece { border: white thin dashed; cursor: pointer; }
		.hierarkia-board .board-cell .cell[attackingto=true] .piece { color: red; cursor: pointer; }

        .hierarkia-board .board-cell .cell[captor=true] .piece{ 
        							color: red;
        							background-image: -webkit-gradient(
    									radial,
    									50% 50%,
    									0,
    									50% 50%,
    									100,
    									color-stop(0, transparent),
    									color-stop(0.15, #800),
    									color-stop(0.35, transparent),
    									color-stop(0.45, #811));
        							}
       .hierarkia-board .board-cell .cell[captor=true] .piece .piece-decoration{ 
        							-webkit-box-shadow: 0px 0px 10px #000000;
        							background-image: -webkit-gradient(
    									radial,
    									50% 50%,
    									0,
    									50% 50%,
    									100,
    									color-stop(0, transparent),
    									color-stop(0.15, #6b0000),
    									color-stop(0.35, transparent));
        							}
      .hierarkia-board .board-cell .cell[captor=true] .piece .piece-decoration .value{
      								text-shadow: #000 -1px 0px 5px;
      								} 

        .hierarkia-board .board-cell .cell[captured=true] .piece{
        							color: red;
        							background-image: -webkit-gradient(
    									linear,
    									0% 100%,
    									100% 100%,
    									color-stop(0, transparent),
    									color-stop(0.2, gray),
    									color-stop(0.35, transparent),
    									color-stop(0.5, gray),
    									color-stop(0.65, transparent),
    									color-stop(0.8, gray),
    									color-stop(1, transparent));
        							}
        .hierarkia-board .board-cell .cell[captured=true] .piece .piece-decoration{
        							-webkit-box-shadow: 0px 0px 10px #000080;
        							background-image: -webkit-gradient(
    									linear,
    									0% 100%,
    									100% 100%,
    									color-stop(0, transparent),
    									color-stop(0.2, gray),
    									color-stop(0.35, transparent),
    									color-stop(0.5, gray),
    									color-stop(0.65, transparent),
    									color-stop(0.8, gray),
    									color-stop(1, transparent));
    									}
        .hierarkia-board .board-cell .cell[captured=true] .piece .piece-decoration .value{ text-shadow: #000 0px 0px 4px;}
    		.hierarkia-board .board-cell .cell[selected=true] .piece .piece-decoration { margin: 22% 0px;}
        .hierarkia-board .board-cell .cell[selected=true] .piece[color="red"] { 
        							color: black; 
        	    				background-image: -webkit-gradient(
    									linear,
    									0% 0%,
    									0% 100%,
    									color-stop(0.4, rgb(114, 92, 63)),
    									color-stop(0.6, rgb(84, 19, 4)));
        	}
        .hierarkia-board .board-cell .cell[selected=true] .piece[color="blue"] { 
        							color: black;
        	    				background-image: -webkit-gradient(
    									linear,
    									0% 100%,
    									0% 0%,
    									color-stop(0.4, rgb(51, 88, 113)),
    									color-stop(0.6, rgb(13, 64, 98)));
        	}
        .hierarkia-board .board-cell .cell[selected=true] .piece .value { text-shadow: #fff 0px 0px 0px; }

.hierarkia-board .board-cell .cell .piece .piece-decoration .value-container { position: absolute; display: table; width: 100%; height: 100%; }
.hierarkia-board .board-cell .cell .piece .piece-decoration .value-container .value { display: table-cell; vertical-align: middle; text-align: center; }


/* Background image stylesheet */

/* Color of a box */
.p-decoration
{
background: #152c32;
}

.bc 
{
		display: block;
		width: 2440px;
		margin: 10%;
		overflow: hidden;
		height: 2800px;
		position: fixed;
		left: 0px;
		bottom: -2300px;
		z-index: -6;
		-webkit-transform: rotateX(85deg) translateZ(970px) rotateZ(45deg) translateY(900px) rotateX(0deg) translateX(330px);
		background-image: -webkit-gradient(
    									linear,
    									100% 100%,
    									0% 0%,
    									color-stop(0.20, white),
    									color-stop(0.70, rgb(0,0,0)));
}
.bc-board .b-cell span { width: 100%; height: 100%; display: inline-block; text-align: center;}		
.bc-board .b-cell .c { width: 100%; height: 100%; position: relative; display: inline-block; }
.bc-board .b-cell .c .pc {position: absolute; width: 80%; height: 80%; margin: 10%; cursor: default;}
.bc-board { width: 100%; height: 100%; }
.bc-board .b-row { width: 100%; margin: 0; padding: 0; border: none;}
.bc-board .b-cell { margin: 0; padding: 0; height: 100%; border: none; display: inline-block;}
.c[homezone="red"] .p-decoration { background: transparent;}